<script setup>



</script>

<template>
  <div class="container">
    <el-row>
      <el-col :xs="24">
        <div class="login-box">



          <router-view></router-view>

        </div>
      </el-col>
    </el-row>
  </div>

</template>

<style lang='scss' scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/images/loginBack.jpg');
  background-size: cover;

  .title {
    font-size: 2rem;
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    & h2 {
      margin: 0 auto;
    }
  }

  .login-box {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 10px #888888;
    padding: 2rem 5rem 0 3rem;

    .login-title {
      display: flex;
      justify-content: space-evenly;
    }

  }



  @media screen and (min-width: 768px) {
    .login-box {
      border-radius: 15px;
      height: 46rem;
      width: 50rem;
      margin: 15vh auto;

      .password-login,
      .message-login {
        font-size: 1.6rem;
        font-weight: bold;
        height: 30px;
        // height: 10px;
      }
    }
  }

  @media screen and (max-width: 767px) {
    .login-box {
      height: 100vh;
      width: 100vw;
      // margin: 15vh auto;
      background-color: rgba(255, 255, 255, 1);

      .password-login,
      .message-login {
        font-size: 1.6rem;
        font-weight: bold;
        height: 30px;
        // height: 10px;
      }
    }
  }


}

//动态类
.active {
  color: rgb(255, 98, 0)
}
</style>




//像 if 一样，如果满足了条件，则应用样式，下面是如果屏幕是200 - 500px 之间，则应用样式
// @media screen and (min-device-width:500px) {
// .div div {
// width: 33.3%;
// }
// }

// @media screen and (min-device-width: 200px) and (max-device-width: 499px) {
// .div div {
// width: 50%;
// }
// }

// @media screen and (max-device-width: 199px) {
// .div div {
// width: 100%;
// }


// }
